<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>个人信息</span>
          </div>
          <div class="text item">
            <div class="avatar-box">
              <el-avatar :size="70" :src="userInfo.avatar" />
            </div>
            <ul>
              <li>
                <div class="left">
                  <i class="el-icon-user-solid" />
                  用户名：
                </div>
                <div class="right">{{ userInfo.nickname }}</div>
              </li>
              <li>
                <div class="left">
                  <i class="el-icon-s-promotion" />
                  OA账号：
                </div>
                <div class="right">{{ userInfo.oaAccount }}</div>
              </li>
              <li>
                <div class="left">
                  <i class="el-icon-s-custom" />
                  部门名称：
                </div>
                <div class="right">{{ userInfo.deptName }}</div>
              </li>
              <li>
                <div class="left">
                  <i class="el-icon-reading" />
                  所属角色：
                </div>
                <div class="right">
                  <span v-for="roleName,index in userInfo.roleName" :key="index">{{ roleName }} </span>
                </div>
              </li>
              <li>
                <div class="left">
                  <i class="el-icon-time" />
                  创建时间：
                </div>
                <div class="right">{{ userInfo.createTime }}</div>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col :span="18">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>基本资料</span>
          </div>
          <div class="text item">
            <el-tabs v-model="activeName">
              <el-tab-pane label="用户信息" name="userChange">
                <!-- 用户信息修改 -->
                <el-form ref="userInfoForm" :rules="userInfoFormRules" :model="userInfoForm" label-width="120px">
                  <el-form-item label="用户昵称：" prop="nickname">
                    <el-input v-model="userInfoForm.nickname" />
                  </el-form-item>
                  <el-form-item label="OA账号：" prop="oaAccount">
                    <el-input v-model="userInfoForm.oaAccount" />
                  </el-form-item>
                  <el-form-item label="头像地址：" prop="avatar">
                    <el-input v-model="userInfoForm.avatar" />
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="updateUserHandler('userInfoForm')">立即修改</el-button>
                  </el-form-item>
                </el-form>
              </el-tab-pane>
              <el-tab-pane label="修改密码" name="passwordChange">
                <!-- 用户密码修改 -->
                <el-form ref="passwordForm" :model="passwordForm" :rules="passwordFormRule" label-width="100px" class="demo-ruleForm">
                  <el-form-item label="旧密码：" prop="oldPass">
                    <el-input v-model="passwordForm.oldPass" />
                  </el-form-item>
                  <el-form-item label="新密码：" prop="newPass">
                    <el-input v-model="passwordForm.newPass" />
                  </el-form-item>
                  <el-form-item label="确认密码：" prop="newPass2">
                    <el-input v-model="passwordForm.newPass2" />
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="updateUserPass('passwordForm')">修改密码</el-button>
                  </el-form-item>
                </el-form>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getInfo, updateUser, updatePass } from '@/api/user'
import store from '@/store'

export default {
  name: 'Info',
  data() {
    // 自定义确认密码验证
    const passwordValidate = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.passwordForm.newPass) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      // 默认打开的tag页
      activeName: 'userChange',
      // 用户信息修改表单数据
      userInfoForm: {
        nickname: '',
        oaAccount: '',
        avatar: '',
        id: ''
      },
      // 密码修改表单
      passwordForm: {
        oldPass: '',
        newPass: '',
        newPass2: ''
      },
      // 表单验证
      userInfoFormRules: {
        nickname: [
          { required: true, message: '请输入用户昵称', trigger: 'blur' }
        ],
        oaAccount: [
          { required: true, message: '请输入OA账号', trigger: 'blur' }
        ],
        avatar: [
          { required: true, message: '请输入头像地址', trigger: 'blur' }
        ]
      },
      // 修改密码表单验证
      passwordFormRule: {
        oldPass: [
          { required: true, message: '请输入旧密码', trigger: 'blur' }
        ],
        newPass: [
          { required: true, message: '请输入新密码', trigger: 'blur' }
        ],
        newPass2: [
          { validator: passwordValidate, trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  created() {
    this.getUserInfo()
  },
  methods: {
    // 修改用户数据
    updateUserHandler(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          updateUser(this.userInfoForm).then(res => {
            this.$message({ message: res.msg, type: 'success' })
            store.dispatch('user/getInfo')
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 修改用户密码
    updateUserPass(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          updatePass({ oldPassword: this.passwordForm.oldPass, newPassword: this.passwordForm.newPass }).then(res => {
            this.$message({ message: res.msg, type: 'success' })
            store.dispatch('user/logout')
            this.$router.go(0)
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 获取用户信息
    getUserInfo() {
      getInfo().then(res => {
        const {	data } = res
        this.userInfoForm.nickname = data.nickname
        this.userInfoForm.avatar = data.avatar
        this.userInfoForm.oaAccount = data.oaAccount
        this.userInfoForm.id = data.id
      })
    }
  }
}
</script>

<style lang="scss" scoped>
	ul{
		padding: 0;
		list-style: none;
		li{
			display: block;
			list-style: none;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			margin: 3px 0;
			padding: 8px;
			border-bottom: 1px solid #e7eaec;
			color: #303133;
			font-size: 13px;
			.left{
				float: left;
			}
			.right{
				float: right;
			}
		}
	}
	li:nth-child(1){
		border-top: 1px solid #e7eaec;
	}
	.avatar-box{
		text-align: center;
	}
</style>
